<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
   #body{
     width:300px;
	 height:150px;
	 border:solid 1px black;
	 margin:auto;
	 overflow:hidden;
   }
   #color_body{
    width:900px;
    height:150px;
   }
   .div_color{
     width:300px;
	 height:150px;
	 float:left;
   }
  </style>
 </head>
 <body>
   <div id="body">
      <div id="color_body">
	     <div class="div_color" style="background-color:red;"></div>
		 <div class="div_color" style="background-color:yellow;"></div>
		 <div class="div_color" style="background-color:blue;"></div>
	  </div>
   </div>
 </body>
 <script>
    var color_body = document.getElementById("color_body");
	var left_1 = 0;
	var left_2 = -600;
	setInterval(function(){
	    if(left_1 > -600){
		   left_1 -= 300;
		   color_body.style.marginLeft = left_1+"px";
		   left_2 = -600;
		}else{
		    if(left_2 != 0){
			   left_2 += 300;
               color_body.style.marginLeft = left_2+"px";
			}else{
			    left_1 = 0;
			}
		}
	    color_body.style.transition = "all 0.5s linear";
	},1500)
 </script>
</html>
